<template>
  <div class="home">
    <div class="bodycontent">
      <div class="navbar">
        <div class="nav_top">
          <el-image style="width: 36px; height: 36px" :src="avatar" fit="fill" class="avatar"></el-image>
          <div class="userinfo">
            <div class="baseinfo">
              
            </div>
          </div>
        </div>
        <ul class="nav_center">
          <li :class="navActive==0?'active':''" @click="navChange(0)">
            <img :src="navActive==0?icon1:icon2" alt="" class="nav_icon">
            <span class="num">1</span>
            <p>聊天</p>
          </li>
          <li :class="navActive==1?'active':''" @click="navChange(1)">
            <img :src="navActive==1?icon4:icon3" alt="" class="nav_icon">
            <span class="num">2</span>
            <p>好友</p>
          </li>
          <li :class="navActive==2?'active':''" @click="navChange(2)">
            <img :src="navActive==2?icon6:icon5" alt="" class="nav_icon">
            <span class="num">3</span>
            <p>群聊</p>
          </li>
        </ul>
        <div class="nav_bottom" :class="moreActive?'active':''">
          <span class="iconfont icon-gengduo" @click="showMore"></span>
          <ul class="more-oper">
            <li>
              <span class="iconfont icon-shouji"></span>
              <span>修改手机</span>
            </li>
            <li>
              <span class="iconfont icon-mima"></span>
              <span>修改密码</span>
            </li>
            <li>
              <span class="iconfont icon-tuichu"></span>
              <span>退出登录</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="listcontent">
        <div class="search_container"></div>
      </div>
      <div class="maincontent">
        <div class="chatinfo"></div>
        <div class="msgcontainer"></div>
        <div class="chat_bottom"></div>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
export default {
  name: 'Home',
  data() {
    return {
      avatar:require('@/assets/images/avatar.jpg'),// 测试头像地址
      icon1:require('@/assets/images/icon1.png'), // 聊天导航图标
      icon2:require('@/assets/images/icon2.png'), // 聊天导航图标
      icon3:require('@/assets/images/icon3.png'), // 好友导航图标
      icon4:require('@/assets/images/icon4.png'), // 好友导航图标
      icon5:require('@/assets/images/icon5.png'), // 群聊导航图标
      icon6:require('@/assets/images/icon6.png'), // 群聊导航图标
      navActive:0,// 当前所选导航下标
      moreActive:false, // 左下角更多是否展示
    }
  },
  components: {
  },
  methods:{
    // 导航切换
    navChange(idx) {
      this.navActive = idx
    },
    // 左下角是否展开更多
    showMore() {
      this.moreActive = !this.moreActive
    }
  }
}
</script>
<style lang='stylus' scoped>
  .home
    height 100%
    background: url('~@/assets/images/bg.png') no-repeat center center
    background-size: cover
    display: flex
    align-items: center
    justify-content: center
    .bodycontent
      width: 67vw;
      height: 85vh;
      min-height: 600px;
      min-width: 970px;
      background #fff
      border-radius: 4px
      display: flex
      .navbar
        width: 60px
        border-right: 1px solid #f3f3f3
        text-align: center
        display: flex;
        flex-direction: column;
        .nav_top
          position relative
          cursor pointer
          .avatar
            margin 10px 0 20px 0
          .userinfo
            // display: none
            width: 350px;
            background: #fff;
            z-index: 20;
            border-radius: 4px;
            position: absolute;
            left: 50px;
            top: 46px;
            -webkit-animation: bounceTopIn-data-v-7078812c .2s;
            animation: bounceTopIn-data-v-7078812c .2s;
            transform-origin: 0 0;
            box-shadow: 0 3px 6px rgb(0 0 0 / 16%);
        .nav_center
          flex 1
          min-height 0
          li
            position: relative
            margin-bottom 20px
            text-align: center
            color #999
            font-size 12px
            cursor pointer
            &.active
              color #3d98ff
            .nav_icon
              width: 24px
              margin-bottom 10px
            .num
              position: absolute
              top 0
              right 6px
              background: #fb7b7a;
              color: #fff;
              text-align: center;
              padding: 0 4px;
              height: 16px;
              line-height: 16px;
              font-size: 12px;
              border-radius: 8px;
        .nav_bottom
          padding-bottom 15px
          cursor pointer
          position relative
          .icon-gengduo
            font-size 20px
          &:hover,&.active
            .icon-gengduo
              color #3d98ff
          &.active
            .more-oper
              display: block
          .more-oper
            display: none
            background: #fff;
            position: absolute;
            z-index: 20;
            -webkit-animation: bounceTopIn .2s;
            animation: bounceTopIn .2s;
            transform-origin: 0 0;
            width: 97px;
            height: 120px;
            box-shadow: 0 3px 6px rgb(180,180,180);
            border-radius: 4px;
            left: 60px;
            bottom: 5px;
            z-index: 10;
            li
              line-height: 40px
              font-size 14px
              .iconfont
                font-size 16px
                margin-right 6px
              &:hover
                background #f4f4f4
        @-webkit-keyframes bounceTopIn
          0%{
            transform:scale(.5)
          }
          to{
            transform:scale(1)
          }
      .listcontent
        width: 276px
        flex-shrink: 0;
        box-shadow 3px 0 6px #d7d5d5
        .search_container
          height: 56px
        .chatlist
          height: calc(100% - 56px)
      .maincontent
        flex: 1;
        overflow: hidden;
        border-radius: 0 4px 4px 0;
        .chatinfo
          display: flex;
          align-items: center;
          height: 56px;
          background: #fcfcfc;
        .msgcontainer
          height: calc(100% - 238px);
          background: #f3f3f3;
        .chat_bottom
          height: 180px;
</style>